﻿@using CSM_SQL;
@using System.Configuration;
@model List<CartMes>


<style>
    .checkbox-custom {
        position: relative;
        padding: 0 0 0 25px;
        margin-bottom: 7px;
        margin-top: 0;
    }
        /*
    将初始的checkbox的样式改变
    */
        .checkbox-custom input[type="checkbox"] {
            opacity: 0; /*将初始的checkbox隐藏起来*/
            position: absolute;
            cursor: pointer;
            z-index: 2;
            margin: -6px 0 0 0;
            top: 50%;
            left: 3px;
        }
        /*
    设计新的checkbox，位置
    */
        .checkbox-custom label:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -9px;
            width: 19px;
            height: 18px;
            display: inline-block;
            border-radius: 2px;
            border: 1px solid #bbb;
            background: #fff;
        }
        /*
    点击初始的checkbox，将新的checkbox关联起来
    */
        .checkbox-custom input[type="checkbox"]:checked + label:after {
            position: absolute;
            display: inline-block;
            font-family: 'FontAwesome';
            content: '\F00C';
            top: 50%;
            left: 4px;
            margin-top: -5px;
            font-size: 11px;
            line-height: 1;
            width: 16px;
            height: 16px;
            color: #333;
        }

        .checkbox-custom label {
            cursor: pointer;
            line-height: 1.2;
            font-weight: normal; /*改变了rememberme的字体*/
            margin-bottom: 0;
            text-align: left;
        }
</style>

<section class="shopping-cart">
    <!-- .shopping-cart -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">

            </div>
            <hr />
            <div class="col-md-12">
                <br />
                <hr />
                <h1>我的购物车</h1>
                <table>
                    <tr>
                        <th align="center">
                            <div class="checkbox-custom checkbox-default">
                                <input type="checkbox" id="All" onchange="selectAll()">
                                <label for="RememberMe">全选</label>
                            </div>
                        </th>
                        <th></th>
                        <th>产品名</th>
                        <th>产品描述</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th></th>
                    </tr>
                    @foreach (var m in Model)
                    {
                        var path = ConfigurationManager.AppSettings["path"].ToString() + m.goods.Img;
                        var amount = m.cart.amount * m.goods.Price;
                        <tr id=@m.cart.Car_ID>
                            <td>
                                <div class="checkbox-custom checkbox-default" onclick="select(@m.cart.Car_ID)">
                                    <input type="checkbox" name="check" value=@m.cart.Car_ID><label></label>
                                </div>
                            </td>
                            <td><img src=@path alt="13" style="width:100px;height:100px"></td>
                            <td>@m.goods.Name</td>
                            <td>@m.goods.Detail</td>
                            <td><strong>￥@m.goods.Price</strong></td>
                            <td><input type="number" value=@m.cart.amount name=@m.cart.Car_ID min="0" max="@m.goods.Stock"></td>
                            <td><strong class="money" name=@m.cart.Car_ID>￥@amount</strong></td>
                            <td><a href=@Url.Action("DelCart",new { id = m.cart.Car_ID })><span class="red"><i class="fa fa-times" aria-hidden="true"></i></span></a></td>
                        </tr>

                    }

                </table>
                <div class="col-sm-6 col-md-6">
                    <a href=@Url.Action("Home") class="button red">继续购物</a>
                </div>
                <div class="col-sm-6 col-md-6 text-right">
                    <a href=@Url.Action("Cart") class="button">更新购物车</a>
                    <a href=@Url.Action("ClearCart") class="button">清空购物车</a>
                </div>


                <div class="col-sm-12 col-md-12">
                    <div class="shipping-outer">
                        <h2>购物车详情</h2>
                        <ul>
                            <li>送货地址： <strong>Address</strong></li>

                            <li>总计: <strong id="amount">￥0.00</strong></li>
                            <li class="text-center">
                                <a style="width:10%;float:right" href="#" data-toggle="modal" data-target="#myModal" class="redbutton">前往付款</a>

                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /.shopping-cart -->
</section>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">支付</h4>
            </div>
            <div class="modal-body">请完成支付</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-success" onclick="pay()">支付成功</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    function selectAll() {
        if ($("#All")[0].checked) {
            var ck = document.getElementsByName("check");
            for (c in ck) {
                ck[c].checked = true;
            }
            var moneys = $("strong.money");
            for (var i = 0; i < moneys.length; i++) {
                var money = moneys[i].innerText;
                var a = money.replace("￥", "");
                var b = $("#amount").text().replace("￥", "");
                $("#amount").text("￥" + (Number(a) + Number(b)).toFixed(2));
            }
        }
        else {
            for (c in document.getElementsByName("check")) {
                var ck = document.getElementsByName("check");
                for (c in ck) {
                    ck[c].checked = false;
                }
            }
        }
    }




    function select(id) {
        var money = $("strong[name=" + id + "]").text();
        if ($("#" + id + " div input")[0].checked) {
            var a = money.replace("￥", "");
            var b = $("#amount").text().replace("￥", "");
            $("#amount").text("￥" + (Number(a) + Number(b)).toFixed(2));
        }
        if (!$("#" + id + " div input")[0].checked) {
            var a = money.replace("￥", "");;
            var b = $("#amount").text().replace("￥", "");
            $("#amount").text("￥" + (Number(b) - Number(a)).toFixed(2));
        }
    }


    $("[type='number']").mouseenter(function () {
        var tempMoney = 0;
        var id = this.name;
        if ($("#" + id + " div input")[0].checked) {
            var money = $("strong[name=" + id + "]").text();
            var a = money.replace("￥", "");;
            var b = $("#amount").text().replace("￥", "");
            tempMoney = (Number(b) - Number(a)).toFixed(2);
            $(this).change(function () {
                if ($(this).val() > $(this).attr("max") || $(this).val() < $(this).attr("max")) {
                    $(this).val($(this).attr("max"));
                    return;
                }
                var price = $("#" + id).children()[4].innerText.replace("￥", "");;
                $("strong[name=" + id + "]").text("￥" + (price * this.value).toFixed(2));
                var money = price * this.value;
                $("#amount").text("￥" + (Number(tempMoney) + Number(money)).toFixed(2));
            });

        }

        $("[type='number']").change(function () {
            $.ajax({
                type: 'get',
                url: '/Home/ChangeCart',
                async: false,
                data: { 'id': this.name, 'amount': this.value },
                success: function (data) {

                }
            });

        });
    });

    function pay() {
        var checked = $("[name='check']");

        var ids = [];
        for (var i = 0; i < checked.length; i++)
        {
            if (checked[i].checked)
                ids.push(checked[i].value);
        }
        var param = {};
        param.id = ids;

        $.ajax({
            type: 'post',
            url: '/Home/Pay',
            async: true,
            dataType:'json',
            data: param,
            success: function (data) {
                $("#myModal").modal("hide");
                window.location.href="/Home/Cart";
            }
        });
    }
</script>
